<template>
  <div class="home">
    <div class="home_header_container">
      <button class="button">侧边栏下拉按钮</button>
    </div>
    <div class="home_content_container">
      <div class="home_aside_container"></div>
      <div class="home_main_container"
      ref="scroll_view">
        <div class="home_main_wrapper">
          <el-row :gutter="10">
            <el-col 
            v-for="(item,index) in data"
            :key="index"
            :md="6"
            :sm="8"
            :xs="24">
              <div class="grid-content">{{item}}</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="loading" v-show="isLoading">
      <img src="../assets/timg.gif"/>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return{
      data:[],
      isLoading:false
    }
  },
  mounted(){
    for(let index=0;index<30;index++){
      this.data.push(index)
    }
    this.$refs.scroll_view.addEventListener("scroll",()=>{
      var target = event.target;
      //可视区域高度 
      var clientHeight  = document.documentElement.clientHeight;
      //滚动视图的高度
      var  scrollHeight = target.scrollHeight;
      //获取滚动距离
      var scrollOffset = target.scrollTop;

      //当可视区域的高度+视图的滚动距离===滚动视图的高度
      if(scrollHeight-scrollOffset-clientHeight <=100){
        //触发上拉加载
        this.isLoading = true;
        setTimeout(() => {
          for(let index=0;index<30;index++){
            this.data.push(index);
          }
          this.isLoading = false;
        }, 3000);
      }
      // console.log(document.documentElement.clientHeight);
      // console.log(target.scrollHeight);
      // console.log(target.scrollTop);

    })
  }
}
</script>

<style scoped>
.home_header_container
{
  width: 100vw;
  height: 10vh;
  border: 1px solid red;
}

.home_content_container
{
  width: 100vw;
  height: 75vh;
  border:1px solid black;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.loading
{
  height: 15vh;
  width: 100%;
  border: 1px solid red;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.loading  img
{
  width: 100px;
}

.home_main_container
{
  width: 80vw;
  height: 100%;
  border: 1px solid pink;
  overflow: scroll;
}


.home_main_wrapper
{
  width: 100%;
  /* display: inline-flex; */
}

/* .grid-content
{
  height: 200px;
  border: 1px solid red;
  margin: 10px 0px;
} */

@media screen and (min-width: 992px){
  .grid-content
  {
    height: 250px;
    border:1px solid pink;
    margin: 10px 0px;
  }
  .home_aside_container
  {
    width: 20vw;
    height: 100%;
    border:1px solid cyan;
  }
  .button
  {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px){
  .grid-content
  {
    height: 250px;
    border: 1px solid blue;
    margin: 10px 0px;
  }
  .home_aside_container
  {
    width: 20vw;
    height: 100%;
    border:1px solid cyan;
  }
  .button
  {
    display: none;
  }
}

@media screen and (max-width: 768px){
  .grid-content
  {
    height: 100px;
    border: 1px solid black;
    margin: 10px 0px;
  }
  .home_aside_container
  {
    display: none;
  }
  .button
  {
    display: block;
  }
}

</style>
